<template>
    <el-form ref="form" :model="form" :rules="rules" label-width="160px">
        <el-row>
            <el-col :span="12"> <el-form-item label="是否关联本系统项目" prop="unionProject">
                    <el-radio-group v-model="form.unionProject">
                        <el-radio v-for="dict in unionProjectOptions" :key="dict.value" :label="dict.value">
                            {{ dict.label }}
                        </el-radio>
                    </el-radio-group>
                </el-form-item></el-col></el-row>
        <el-row>
            <el-col :span="12">
                <el-form-item label="项目名称" prop="projectName">
                    <el-input v-model="form.projectName" placeholder="请输入项目名称" clearable />
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="关联本系统项目" prop="projectId" v-if="form.unionProject == 'Y'">
                    <el-select v-model="form.projectId" placeholder="请选择关联本系统项目" style="width: 100%" clearable>
                        <el-option v-for="dict in projectNameOptions" :key="dict.id" :label="dict.label" :value="dict.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
</template>
<script>
export default {
    data() {
        return {
            form: { projectName: '' },
            rules: {},
            title: 'zhe',
            unionProjectOptions:
                [
                    { label: '是', value: "Y" },
                    {
                        label: '否', value: "N"
                    }
                ], projectNameOptions: [
                    { label: 'ddddd', id: 1 },
                    { label: 'aaaa', id: 2 },
                    { label: 'bbbb', id: 3 },
                    { label: 'cccc', id: 4 },
                ]
        }
    },
    watch: {
        'form.projectId'(newValue, oldValue) {
            if (this.form.unionProject === 'Y') {
                if (this.form.projectName) {
                    let a = this.form.projectName;
                    if (newValue || oldValue) {
                        let arr = this.projectNameOptions.map(item => item.label);
                        if (arr.includes(a)) {
                            this.form.projectName = null;
                            this.projectNameOptions.forEach(item => {
                                if (item.id === newValue) {
                                    this.form.projectName = item.label;
                                }
                            });
                        } else {
                            this.form.projectName = a;
                        }
                    }
                } else {
                    this.form.projectName = null;
                    if (newValue !== oldValue) {
                        this.projectNameOptions.forEach(item => {
                            if (item.id === newValue) {
                                this.form.projectName = item.label;
                            }
                        });
                    }
                }
            }
        }
        /*  'form.projectId'(newValue, oldValue) {
           if (this.form.unionProject === 'Y') {
             if (this.form.projectName) {
               let a = this.form.projectName
               if (newValue || oldValue) {
                 let arr = this.projectNameOptions.map(item => item.label);
                 if (arr.includes(a)) {
                   this.projectNameOptions.forEach(item => {
                     if (!newValue) {
                       this.form.projectName = null;
                     }
                     if (item.id === newValue) {
                       this.form.projectName = item.label;
                     }
                   });
                 } else {
                   this.form.projectName = a
                 }
               }
             } else {
               if (!newValue) {
                 this.form.projectName = null;
               }
               if (newValue !== oldValue) {
                 this.projectNameOptions.forEach(item => {
                   if (item.id === newValue) {
                     this.form.projectName = item.label;
                   }
                 });
               }
             }
           }
         } */
    },
}
</script>
<style  lang='less' scoped></style>